<template>
  <el-row class="container">
    <!--头部-->
    <el-col :span="24" class="topbar-wrap">
      <div class="topbar-logo topbar-btn">
        <a href="/"><img src="@/assets/logo.jpg" style="padding-left:8px;"></a>
      </div>
      <div class="topbar-logos" v-show="!collapsed">
        <a href="/"><img src="@/assets/logotxt.jpg"></a>
      </div>

      <div class="topbar-title">
        <span style="font-size: 18px;color: #fff;">U智远程教育平台-学生端</span>
      </div>

     <!-- 右上角 -->
      <div class="topbar-account topbar-btn">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i>{{ nickname }}  <i
            class="iconfont icon-down"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span style="color: #555;font-size: 14px;" @click="showStuInfo()">个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
            <span style="color: #555;font-size: 14px;" @click="editPasswordVisible = true">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>

    <!--中间-->
    <el-col :span="24" class="main">
      <!--左侧导航-->
      <aside :class="{showSidebar:!collapsed}">
        <!--展开折叠开关-->
        <div class="menu-toggle" @click.prevent="collapse">
          <i class="iconfont icon-menufold" v-show="!collapsed"></i>
          <i class="iconfont icon-menuunfold" v-show="collapsed"></i>
        </div>
        <!--导航菜单-->
        <el-menu default-active="0" router :collapse="collapsed">
          <template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
            <el-submenu v-if="!item.leaf" :index="index+''">
              <template slot="title"><i :class="item.iconCls"></i><span style="color: red;" slot="title">{{item.name}}</span></template>
              <el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow"
                            :class="$route.path==term.path?'is-active':''">
                <i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"
                          :class="$route.path==item.children[0].path?'is-active':''">
              <i :class="item.iconCls"></i><span style="color: #C71585;" slot="title">{{item.children[0].name}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </aside>


      <!--右侧内容区-->
      <!-- 上面导航  面包屑 -->
      <section class="content-container">
        <div style="height:50px" >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in $route.matched"  :key="item.name" >
              <el-breadcrumb-item v-if="item.name == '主页'" :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-else :to="item.path">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="grid-content bg-purple-light">
          <el-col :span="24" class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-col>
        </div>
      </section>
    </el-col>
    <!--点击个人信息弹出该对话框 -->
    <el-dialog title="个人信息" :visible.sync="showStuInfoVisible">
      <el-form :model="stuInfoForm" status-icon :rules="rules2" ref="stuInfoForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="编号:" prop="teacherId">
          {{stuInfoForm.teacherId}}
        </el-form-item>
        <el-form-item label="姓名:" prop="teacherRealname">
          {{stuInfoForm.teacherRealname}}
        </el-form-item>

        <el-form-item label="邮箱:" prop="teacherEmail" v-if="isEmailHidden">
            {{stuInfoForm.teacherEmail}}
            <!-- <el-button size="small" type="success" @click="hiddenChange1">修改</el-button> -->
        </el-form-item>

        <el-form-item label="邮箱:" prop="teacherEmail" v-if="isInputEmailHidden">
          <el-input v-model.number="stuInfoForm.teacherEmail"></el-input>
        </el-form-item>

        <el-form-item label="手机号:" prop="teacherPhone" v-if="isPhoneHidden">
          {{stuInfoForm.teacherPhone}}
          <!-- <el-button size="small" type="success" @click="hidddenChange2">修改</el-button> -->
        </el-form-item>
        <el-form-item label="手机号:" prop="teacherPhone" v-if="isInputPhoneHidden">
          <el-input v-model.number="stuInfoForm.teacherPhone"></el-input>
        </el-form-item>
          <!-- <el-button type="primary" @click="submitForm('stuInfoForm')">保存</el-button> -->
          <el-button type="primary" @click="showStuInfoVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="个人信息" :visible.sync="editPasswordVisible">
        <el-form :model="ruleForm2" status-icon :rules="rulesPass" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-form-item label="原密码" prop="prePass">
        <el-input type="password" v-model="ruleForm2.prePass" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitEditPassForm('ruleForm2')">提交</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </el-row>
</template>

<script>
  import {bus} from '@/common/js/bus.js'
  import {TeachermanageSel, TeachermanageUp, requestLogout,queryterInfo} from '@/axios/api'
  export default {
    name: 'homegu',
    created(){
        bus.$on('setNickName', (text) => {
        this.nickname = text;
      })

      bus.$on('goto', (url) => {
        if (url === "/login") {
          localStorage.removeItem('admin-user');
        }
        this.$router.push(url);
      })
    },
    data () {
      var validatePrePass = (rule, value, callback) => {
        if(value === '') {
					callback(new Error('原密码不能为空'));
				} else {

					let loginParams = {
						teacherId:this.tid ,
						teacherPwd: this.ruleForm2.prePass
					};
					console.log(loginParams);
					queryterInfo(loginParams).then(res => {

						if(res.status == 200) {
							callback()
						} else {
							callback(new Error('原密码错误'));
						}
					})
				}
			};
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					if(this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.ruleForm2.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
      var validateEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        callback() ;
      };
      var validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('手机号不能为空'));
        }
        callback() ;
      };
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          prePass:''
        },
        rulesPass: {
          prePass:[
            {validator: validatePrePass, trigger: 'blur'}
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        },
        editPasswordVisible :false,
        isPhoneHidden:true,
        isEmailHidden:true,
        isInputEmailHidden:false,
        isInputPhoneHidden:false,
        stuInfoForm: {
        },
        nickname: '',
        tid:'',
        collapsed: false,
        showStuInfoVisible :false,
        rules2: {
          teacherEmail: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          teacherPhone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
    submitEditPassForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              let loginParams = {
    						teacherId:this.tid ,
    						teacherPassword: this.ruleForm2.checkPass
    					};
              console.log(loginParams);
              TeachermanageUp(loginParams).then(res =>{
                if(res.status == 200) {
        						this.$message({
        							message: res.message,
        							type: 'success'
        						});
        						this.editPasswordVisible=false;
        					} else {
        						this.$message({
        							message: res.message,
        							type: 'info'
        						})
        					};
        				}).catch(() => {
        					this.$message({
        						type: 'info',
        						message: '取消修改'
        					});
              })
              this.editPasswordVisible= false;//关闭对话框
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
     hiddenChange1() {
        this.isEmailHidden = false,
        this.isInputEmailHidden = true

      },
      hidddenChange2() {
        this.isPhoneHidden = false,
        this.isInputPhoneHidden = true
      },
      handleOpen() {
        //console.log('handleopen');
      },
      handleClose() {
        //console.log('handleclose');
      },
      //折叠导航栏
      collapse: function () {
        this.collapsed = !this.collapsed;
      },
      showMenu(i, status){
        this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
      },
      showStuInfo() {
        console.log(this.tid);
        let param = {teacherId:this.tid}
        TeachermanageSel(param).then(res => {
          console.log(res);
          this.stuInfoForm = res.resData;
          this.showStuInfoVisible = true;
        })
      },
      submitForm(stuInfoForm) {
        this.$refs[stuInfoForm].validate((valid) => {
          let params = {teacherEmail: stuInfoForm.teacherEmail,teacherPhone: stuInfoForm.teacherPhone};
          console.log(params);
          if (valid) {
            TeachermanageUp(params).then(res => {
              let {status, message} = res ;
              if (res.status == 200) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.showStuInfoVisible= false;

              } else {
                  this.$message.error('修改失败');
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },


      logout(){
        let that = this;
        this.$confirm('确认退出吗?', '提示', {
          confirmButtonClass: 'el-button--warning'
        }).then(() => {
          //确认
          that.loading = true;
          requestLogout().then((res) => {
            let{status, message} = res;
            if (status == 200) {
              that.loading = false;
              localStorage.removeItem('admin-user');
              that.$router.go('/login'); //用go刷新
              this.$message({
                message: '您已成功退出',
                type: 'success'
              });
            } else {
                this.$message.error('500:退出失败');
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
        });
      }
    },
    mounted() {
      let user = localStorage.getItem('admin-user');
      if (user) {
        user = JSON.parse(user);
        this.nickname = user.teacherRealname || '';
        this.tid = user.teacherId;
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;

    .topbar-wrap {
      height: 50px;
      line-height: 50px;
      background: #373d41;
      padding: 0px;

      .topbar-btn {
        color: #fff;
      }
      /*.topbar-btn:hover {*/
      /*background-color: #4A5064;*/
      /*}*/
      .topbar-logo {
        float: left;
        width: 59px;
        line-height: 26px;
      }
      .topbar-logos {
        float: left;
        width: 120px;
        line-height: 26px;
      }
      .topbar-logo img, .topbar-logos img {
        height: 40px;
        margin-top: 5px;
        margin-left: 2px;
      }
      .topbar-title {
        float: left;
        text-align: left;
        width: 250px;
        padding-left: 10px;
        border-left: 1px solid #000;
      }
      .topbar-account {
        float: right;
        padding-right: 12px;
      }
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        padding-left: 10px;
      }
    }
    .main {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      top: 50px;
      bottom: 0px;
      overflow: hidden;
    }

    aside {
      min-width: 50px;
      background: #333744;
      &::-webkit-scrollbar {
        display: none;
      }

      &.showSidebar {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .el-menu {
        height: 100%; /*写给不支持calc()的浏览器*/
        height: -moz-calc(100% - 80px);
        height: -webkit-calc(100% - 80px);
        height: calc(100% - 80px);
        border-radius: 0px;
        background-color: #333744;
      }

      .el-submenu .el-menu-item {
        min-width: 60px;
      }

      .el-menu {
        width: 180px;
      }
      .el-menu--collapse {
        width: 60px;
      }

      .el-menu .el-menu-item, .el-submenu .el-submenu__title {
        height: 46px;
        line-height: 46px;
      }

      .el-menu-item:hover, .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
        background-color: #C6E2FF;
      }
    }

    .menu-toggle {
      background: #4A5064;
      text-align: center;
      color: white;
      height: 26px;
      line-height: 30px;
    }
    .content-container {
      background: #fff;
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      padding-bottom: 1px;

      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
</style>
